<template>
    <uni-popup type="bottom" ref="posterPopup">
        <div class="poster_container">
            <div class="poster_img">
                <image :src="posterImg" mode="" />
            </div>
            <div class="des">
                <p>{{tip}}</p>
                <span>{{subTip}}</span>
            </div>
            <div @click="$refs.posterPopup.close()" class="cancel">取消</div>
        </div>
    </uni-popup>
</template>

<script>
import html2canvas from 'html2canvas'
import { getImgTemp, drawCircleImage, createQRcode, cropImage, canvasMultiLineText } from '@/utils/draw'
import posterBg from '@/static/images/poster-bg.png'
import logoPic from '@/static/images/logo.png'
import videoIcon from '@/static/images/video-play.png'

export default {
    data() {
        return {
            type: '', //article video
            title: '', 
            qrcode: '',
            mainPic: '',
            posterImg: '',
            
        }
    },
    props: {
        tip: {
            type: String,
            default: '海报已添加您的名片可追踪客户'
        },
        subTip: {
            type: String,
            default: '长按海报发送给客户'
        }
    },
    computed: {

    },
    methods: {
        create(options) {
            return new Promise(async (resolve, reject) => {
                this.mainPic = options.mainPic
                this.linkQrcode = options.linkQrcode
                this.type = options.type
                this.title = options.title
                console.log(options);
                await this.createPosterDefault()
                resolve()
            })
        },
        alertPoster(imgUrl) {
            this.posterImg = imgUrl
            this.$refs.posterPopup.open()
        },
        async createPosterDefault() {
            return new Promise(async (resolve, reject) => {
                uni.showLoading({ title: '正在生成海报' });
                var canvas = document.createElement('canvas')
                const ctx = canvas.getContext('2d')
                canvas.width = 500
                canvas.height = 850
                try {
                    ctx.fillStyle = "#fff";
                    ctx.fillRect(0, 0, 500, 850);
        
                    let bgPic = await getImgTemp(posterBg)
                    ctx.drawImage(bgPic, 0, 0, 500, 850); //绘制图
        
                    if(this.mixinLoginStatus && this.$store.state.user.userInfo.vip == '01') {
                        if(this.$store.state.user.userInfo.headImg) {
                            let avatorPic = await getImgTemp(this.$store.state.user.userInfo.headImg)
                            drawCircleImage(ctx, avatorPic, 75, 65, 45 )
                        }
        
                        ctx.textAlign = 'left'
                        ctx.fillStyle = "#500814";
                        ctx.font = 'bold 22px sans-serif';
                        ctx.fillText(this.$store.state.user.userInfo.userName, 140, 55);
        
                    } else {
                        let avatorPic = await getImgTemp(logoPic)
                        drawCircleImage(ctx, avatorPic, 75, 65, 45 )
        
                        ctx.textAlign = 'left'
                        ctx.fillStyle = "#500814";
                        ctx.font = 'bold 22px sans-serif';
                        ctx.fillText('易客岛', 140, 55);
                    }
        
                    ctx.fillStyle = "#979faa";
                    ctx.font = 'normal 22px sans-serif';
                    if(this.type == 'article') {
                        ctx.fillText('邀您一起阅读原文', 140, 95);
                    }
                    if(this.type == 'video') {
                        ctx.fillText('邀您一起浏览视频', 140, 95);
                    }
        
                    
                    ctx.textAlign = 'left'
                    ctx.fillStyle = "#000";
                    ctx.font = 'bold 26px sans-serif';
                    ctx.fillText('易客岛', 50, 720);
        
                    ctx.fillStyle = "#999";
                    ctx.font = '20px sans-serif';
                    ctx.fillText('长按扫码浏览视频', 50, 770);
    
                
                    if(this.type == 'article') {
                        await this.createArticlePoster(ctx)
                    } else if(this.type == 'video') {
                        await this.createVideoPoster(ctx)
                    }
    
                    let qrcodeBase64 = await createQRcode(this.linkQrcode)
                    let qrcodePic = await getImgTemp(qrcodeBase64)
                    ctx.drawImage(qrcodePic, 355, 680, 100, 100); //绘制图
    
                } catch(err) {
                    console.log(err);
                    return this.$interact.toast('海报生成失败')
                }
    
                this.alertPoster(canvas.toDataURL('images/jpeg', 1))
                uni.hideLoading();
                resolve()
            })

        },
        createVideoPoster(ctx) {
            return new Promise(async (resolve, reject) => {
                ctx.textAlign = 'left'
                ctx.fillStyle = "#000";
                ctx.font = 'bold 26px sans-serif';
                let words = canvasMultiLineText(ctx, this.title, 360, 2)
                console.log(words);
                let titleStartX = words.length == 1 ? 200 : 180
                words.forEach((item, index) => {
                    ctx.fillText(item, 60, titleStartX + index * 40);
                })

                let mainPicInfo = await getImgTemp(this.mainPic)
                ctx.drawImage(mainPicInfo, 110, 250, 280, 370); //绘制图
                console.log(mainPicInfo.width);
                console.log(mainPicInfo.height);

                ctx.beginPath()
                ctx.lineWidth = 6
                ctx.strokeStyle = '#666'
                ctx.fillStyle = "#fff";
                ctx.arc(250, 430, 40, 0, 2 * Math.PI)
                ctx.fill()
                ctx.stroke()

                let playIcon = await getImgTemp(videoIcon)
                ctx.drawImage(playIcon, 234, 410, 40, 40); //绘制图

                resolve()
            })
        },
        createArticlePoster(ctx) {
            return new Promise(async (resolve, reject) => {
                let element = document.getElementById('article')
                html2canvas(element, {
                    useCORS: true,
                    width: element.offsetWidth,
                    scale: 1,
                    height: element.offsetWidth * 1.15,
                }).then(async rst => {
                    let artPicBase64 = rst.toDataURL('images/jpeg', 1)
                    // console.log(element);
                    // console.log(artPicBase64);
                    let artPic = await getImgTemp(artPicBase64)
                    ctx.drawImage(artPic, 50, 150, 400, 400*1.15); //绘制图

                    // 设置透明度渐变  
                    let agStartY = 550
                    let agHeight = 60
                    var alphaGradient = ctx.createLinearGradient(50, agStartY, 50, agStartY + agHeight);  
                    alphaGradient.addColorStop(0, 'rgba(255,255,255,0)');   
                    alphaGradient.addColorStop(0.5, 'rgba(255,255,255,0.6)');  
                    alphaGradient.addColorStop(1, 'rgba(255,255,255,1)');  
                    ctx.fillStyle = alphaGradient; // 使用透明度渐变  
                    ctx.fillRect(50, agStartY, 400, agHeight);  
    
                    ctx.fillStyle = "#0086fa";
                    ctx.font = 'bold 22px sans-serif';
                    ctx.textAlign = 'center'
                    ctx.fillText('扫码查看原文', 250, 620);
                    resolve()
                });
            })
        },
        
    }
}
</script>

<style lang="less" scoped>

.poster_container{
    width: 100%;
    height: 700rpx;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 999;
    .poster_img{
        width: 500rpx;
        height: 850rpx;
        background: #fff;
        position: absolute;
        bottom: 250rpx;
        left: 125rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .des{
        .align(center, column);
        margin-bottom: 30rpx;
        p{
            font-size: 34rpx;
            font-weight: bold;
        }
        span{
            margin-top: 20rpx;
            color: #666;
            font-size: 28rpx;
        }
    }
    .cancel{
        width: 100%;
        height: 80rpx;
        background: #fff;
        .align(center);
        color: @mainColor;
    }
}
</style>